<template>
  <div class="Personal">
    <div class="header_Personal">
      <div class="centre logo">
        <router-link
          to="index"
          tag="img"
          src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg"
          alt
        ></router-link>
        <span>个人中心</span>
      </div>
      <div class="PersonalDetails">
        <div class="centre">
          <div class="Personal_left">
            <div class="left_top">
              <div class="myimg">
                <img
                  v-if="MyList.headUrl.substring(0,6) == 'wxfile' "
                  src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg"
                  alt
                />
<<<<<<< HEAD
                <img v-else :src="MyList.headUrl" alt />
              </div>
              <div class="myname">
                <h3>{{Name}}</h3>
              </div>
              <div v-if="MyList.vip == 3" class="vip skyblue">
                <el-button type="info" v-if="MyList.vip == 3" disabled>专家一对一</el-button>
              </div>
              <router-link v-else to="/MyMember/Member/3" tag="div" class="vip">
                <el-button type="primary" v-if="MyList.vip == 0 || MyList.vip == 1 ">开通VIP</el-button>
                <el-button type="warning" v-if="MyList.vip == 2 ">志愿卡</el-button>
                <el-button type="info" v-if="MyList.vip == 3">专家一对一</el-button>
=======
                <img :src="MyList.headUrl" alt />
              </div>
              <div class="myname">
                <h3>{{MyList.username}}</h3>
              </div>
              <router-link to="/MyMember/Member/1" tag="div" class="vip">
                <el-button type="primary" v-if="MyList.vip == 0">开通VIP</el-button>
                <el-button type="warning" v-if="MyList.vip == 1">志愿卡</el-button>
                <el-button type="info" v-if="MyList.vip == 2">专家一对一</el-button>
>>>>>>> 314b442cce11d658746227581b0160373004c345
              </router-link>
            </div>

            <div class="left_bottom">
              <ul>
                <router-link to="/Alternative" tag="li">
                  <i class="iconfont">&#xe8af;</i>我的备选志愿
                </router-link>

                <router-link to="/VolunteerList" tag="li">
                  <i class="iconfont">&#xe777;</i>我的志愿表
                </router-link>
                <router-link to="/Follow" tag="li">
                  <i class="iconfont">&#xe6cf;</i>我的关注
                </router-link>
                <!-- <router-link to="/MyPK" tag="li">
                  <i class="iconfont">&#xe619;</i>我的PK
                </router-link>
                <li></li>-->
              </ul>
            </div>
          </div>
          <div class="Personal_right">
            <transition name="fade">
              <router-view></router-view>
            </transition>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Personal",
  data() {
    return {
      tyle: "0",
<<<<<<< HEAD
      MyList: "",
      Name: localStorage.getItem("username")
=======
      MyList: ""
>>>>>>> 314b442cce11d658746227581b0160373004c345
    };
  },

  methods: {
    open3(s) {
      this.$message.error(s);
    },
    getPersonal() {
      this.$ajax({
        method: "POST",
        url: "/api/query/userInfo",

        success: res => {
          if (res.data.code == 0) {
            this.MyList = res.data.data;
          } else {
            this.open3(res.data.msg);
          }
        }
      });
    }
  },
  beforeCreate() {
    this.$nextTick(() => {
      this.getPersonal();
    });
  }
};
</script>
<style lang="scss">
.header_Personal {
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .logo {
    padding: 10px 0;
    img {
      width: 48px;
    }
    span {
      font-size: 22px;
      color: #5e5e5e;
      padding-left: 24px;
      position: relative;
      top: -18px;
    }
  }
}
.PersonalDetails {
  background: #f6f6f6;

  padding: 44px 0;
  .centre {
    display: flex;
    justify-content: space-between;
  }
  .Personal_left {
    border-radius: 8px;
    width: 240px;
    overflow: hidden;
    .left_top {
      background: #e6f0ff;
      display: flex;
      flex-direction: column;
      height: 240px;
      width: 240px;
      .myimg {
        padding: 10px;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        margin-top: 32px;
        border: 1px solid #fff;
        img {
          width: 70px;
          height: 70px;
          border-radius: 50%;
          overflow: hidden;

          border: 1px solid #fff;
        }
      }
      .myname {
        text-align: center;
        color: #434344;
        font-size: 16px;
        line-height: 44px;
      }
      .vip {
<<<<<<< HEAD
        margin: 0 auto;
        .el-button {
          margin: 0 auto;
        }
      }
      .skyblue {
        background: skyblue;
      }
=======
        width: 97px;
        height: 30px;
        margin: 0 auto;
        .el-button {
        }
      }
>>>>>>> 314b442cce11d658746227581b0160373004c345
    }

    .left_bottom {
      height: 536px;
      width: 240px;
      background: #fff;
      ul {
        color: #757575;
        font-size: 16px;
        li {
          cursor: pointer;
          padding-top: 46px;
          padding-left: 24px;
          i {
            padding-right: 10px;
            color: #c8c8c8;
          }
        }
        .router-link-active {
          color: #414141;
          .iconfont {
            color: #2e86ff;
          }
        }
      }
    }
  }
  .Personal_right {
    width: 920px;
    overflow: hidden;
  }
}
</style>